<template>
  输入：<input type="text" v-model="keyword">
  <h2>{{ keyword }}</h2>
</template>

<script>
import { customRef, } from 'vue'

export default {
  name: 'School-Comp',
  setup() {
    function myRef(value, delay) {
      return customRef((track, trigger) => {
        let timer;
        return {
          get() {
            console.log("从myRef中读取了数据 ", value, track);
            track(); // 通知Vue追踪这个value的变化
            return value;
          },
          set(newValue) {
            clearTimeout(timer);
            console.log("把myRef中的数据修改了 ", newValue, trigger);
            timer = setTimeout(() => {
              value = newValue;
              trigger(); // 通知Vue重新解析模板，Vue重新解析模板调用get方法
            }, delay)
          }
        }
      });
    }

    let keyword = myRef("", 500);

    return {
      keyword
    }
  },
}
</script>

<style></style>

